<template>
    <div style="background-color: rgba(5,2,3,0.17)">
        <el-page-header @back="goBack" content="详情">
        </el-page-header>
    <el-row>
    <el-col style="margin-left: 250px" :span="16">
        <el-card :body-style="{ padding: '0px' }">
            <div class="block">
                <el-carousel height="300px">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <img :src="'/img/productPictures/'+product.productPicture" class="image">
                        <h3 class="small">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
           <div style="display: flex ;background-color: #ff8989">
               <div style="margin-left: 30px;margin-top: 10px;">
                   <span style="font-size: 40px;color: red">￥{{product.productSalePrice}}</span>
               </div>
                <div style="margin-top: 25px;margin-left: 20px">
                    <el-tag  color="#FF6A6A" size="medium" type="">火爆销售</el-tag>
                    <el-tag  color="#FF6A6A" size="medium" type="">低价购买</el-tag>
                </div>
               <div @click="buyIt()" style="margin-left: 550px;cursor: pointer; margin-top: 15px;font-size: 30px;text-shadow:2px 1px;">
                 <span style="color: #5878ff">   立即购买</span>
               </div>
           </div>
            <div style="margin-top: 20px">
            <span style="font-size: 20px;">{{product.productName}}</span>
            </div>
            <el-button id="goPay"  @click="addShoppongCart(product.productId)" type="" round>加入购物车</el-button>

            <div style="margin-left: -910px">
                <el-tag size="medium" type="">新鲜日期</el-tag>
            </div>
            <div style="width: 430px;margin-left: 720px;margin-top: -5px">
                <el-rate disabled
                         v-model="star"
                         :colors="colors">
                </el-rate>
            </div>
<!--            <pay-money v-show="ask"></pay-money>-->

            <hr style="margin-top: 20px">
<div style="font-size: 20px;margin-left: -900px;margin-top: 30px">
    规格信息
</div>
            <div style="display: flex;margin-top: 20px">
                <el-input disabled class="input1" value="名称"></el-input>
                <el-input disabled class="input2"  :value="product.productName"></el-input>
            </div>
            <div style="display: flex">
                <el-input disabled class="input1"  value="分类"></el-input>
                <el-input disabled class="input2"  :value="product.productCategory.categoryName"></el-input>
            </div>
            <div style="display: flex">
                <el-input disabled class="input1"  value="上架状态"></el-input>
                <el-input disabled class="input2"  :value="product.productIsEnabled"></el-input>
            </div>

            <div style="display: flex">
                <el-input disabled class="input1"  value="新鲜度"></el-input>
                <el-input disabled  class="input2" value="刚刚采摘"></el-input>
            </div>
            <hr style="margin-top: 40px">

            <div style="height: 200px;margin-top: 60px;margin-left: -900px">用户评价</div>
        </el-card>

    </el-col>
    </el-row>
    </div>
</template>

<script>
    import PayMoney from "./payMoney";
    export default {
        name: "goodDetail",
        components: {PayMoney},
        data(){
            return {
                ask:false,  //显示结算
                product: this.$route.params.product, //取值
                star: 4,  //评分多少颗星
                colors: ['#99A9BF', '#F7BA2A', '#FF9900']

            }

        },
        methods:{
            buyIt(){
                this.ask='true'
            },
            addShoppongCart() {
                let userId = this.$cookies.get("id")
                this.$axios({
                    url: '/api/shoppingCart/addShoppingCart',
                    method: 'post',
                    data: {
                        number: 1,
                        price: this.product.productSalePrice,
                        productId: this.product.productId,
                        userId: userId,
                    }
                }).then(res => {
                    console.log("更新成功", res)
                    if (res.data > 0) {          //只有data返回1时成功
                        this.$message({ //成功修改提示
                            showClose: true,  //设置手动关闭
                            center: true,//内容居中
                            message: '收藏成功',
                            type: 'success'
                        })
                    }
                })
            }
        },
        created() {
            console.log(product)
        },

    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .input1{
        width: 100px;
        margin-left: 160px;
        margin-top: 10px;
    }
    .input2{
        width: 500px;
        margin-left: 10px;
        margin-top: 10px;
    }
    #goPay{
        margin-left: 850px;
        margin-top: -120px;
        color: #d3dce6;
        background-color: #ff7e7b;

    }
    .image {
        width:1010px;
        height:auto;
        max-width:100%;
        max-height:100%;
        display: block;
    }
</style>
